<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <link href="../../jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="../../jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="../../jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>

    <script type="text/javascript">

        //默认情况下取消和保存按钮是隐藏的
        var cancelAndSaveBtnDefault = true;
        $(function () {
            // $("#remark").focus(function () {
            //     if (cancelAndSaveBtnDefault) {
            //         //设置remarkDiv的高度为130px
            //         $("#remarkDiv").css("height", "130px");
            //         //显示
            //         $("#cancelAndSaveBtn").show("2000");
            //         cancelAndSaveBtnDefault = false;
            //     }
            // });
            //
            // $("#cancelBtn").click(function () {
            //     //显示
            //     $("#cancelAndSaveBtn").hide();
            //     //设置remarkDiv的高度为130px
            //     $("#remarkDiv").css("height", "90px");
            //     cancelAndSaveBtnDefault = true;
            // });

            // $(".remarkDiv").mouseover(function () {
            //     $(this).children("div").children("div").show();
            // });
            //
            // $(".remarkDiv").mouseout(function () {
            //     $(this).children("div").children("div").hide();
            // });

            $(".myHref").mouseover(function () {
                $(this).children("span").css("color", "red");
            });

            $(".myHref").mouseout(function () {
                $(this).children("span").css("color", "#E6E6E6");
            });
        });
    </script>

</head>
<body>


<!-- 返回按钮 -->
<div style="position: relative; top: 35px; left: 10px;">
    <a href="javascript:void(0);" onclick="window.history.back();"><span class="glyphicon glyphicon-arrow-left"
                                                                         style="font-size: 20px; color: #DDDDDD"></span></a>
</div>

<!-- 大标题 -->
<div style="position: relative; left: 40px; top: -30px;">
    <div class="page-header">
        <h3>市场活动-发传单 <small>2020-10-10 ~ 2020-10-20</small></h3>
    </div>
</div>

<!-- 详细信息 -->
<div style="position: relative; top: -70px;">
    <div style="position: relative; left: 40px; height: 30px;">
        <div style="width: 300px; color: gray;">所有者</div>
        <div style="width: 300px;position: relative; left: 200px; top: -20px;"><b id="owner">zhangsan</b></div>
        <div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">名称</div>
        <div style="width: 300px;position: relative; left: 650px; top: -60px;"><b id="name">发传单</b></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
    </div>

    <div style="position: relative; left: 40px; height: 30px; top: 10px;">
        <div style="width: 300px; color: gray;">开始日期</div>
        <div style="width: 300px;position: relative; left: 200px; top: -20px;"><b id="startDate">2020-10-10</b></div>
        <div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">结束日期</div>
        <div style="width: 300px;position: relative; left: 650px; top: -60px;"><b id="endDate">2020-10-20</b></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 20px;">
        <div style="width: 300px; color: gray;">成本</div>
        <div style="width: 300px;position: relative; left: 200px; top: -20px;"><b id="cost">4,000</b></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -20px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 30px;">
        <div style="width: 300px; color: gray;">创建者</div>
        <div style="width: 500px;position: relative; left: 200px; top: -20px;"><b id="createBy">zhangsan&nbsp;&nbsp;</b><small
                style="font-size: 10px; color: gray;" id="createTime">2017-01-18 10:10:10</small></div>
        <div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 40px;">
        <div style="width: 300px; color: gray;">修改者</div>
        <div style="width: 500px;position: relative; left: 200px; top: -20px;"><b
                id="editBy">zhangsan&nbsp;&nbsp;</b><small style="font-size: 10px; color: gray;" id="editTime">2017-01-19
            10:10:10</small></div>
        <div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 50px;">
        <div style="width: 300px; color: gray;">描述</div>
        <div style="width: 630px;position: relative; left: 200px; top: -20px;">
            <b id="description">
                市场活动Marketing，是指品牌主办或参与的展览会议与公关市场活动，包括自行主办的各类研讨会、客户交流会、演示会、新产品发布会、体验会、答谢会、年会和出席参加并布展或演讲的展览会、研讨会、行业交流会、颁奖典礼等
            </b>
        </div>
        <div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;"></div>
    </div>
</div>

<!-- 备注 -->
<div style="position: relative; top: 30px; left: 40px;">
    <div class="page-header">
        <h4>备注</h4>
    </div>


    <div id="remarkBody">
        <!-- 备注1 -->
        <div class="remarkDiv" style="height: 60px;">
            <img title="zhangsan" src="../../image/user-thumbnail.png" style="width: 30px; height:30px;">
            <div style="position: relative; top: -40px; left: 40px;">
                <h5>哎呦！</h5>
                <font color="gray">市场活动</font> <font color="gray">-</font> <b>发传单</b> <small style="color: gray;">
                2017-01-22 10:10:10 由zhangsan</small>
                <div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: block;">
                    <a class="myHref" href="javascript:void(0);"><span class="glyphicon glyphicon-edit"
                                                                       style="font-size: 20px; color: #E6E6E6;"></span></a>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <a class="myHref" href="javascript:void(0);"><span class="glyphicon glyphicon-remove"
                                                                       style="font-size: 20px; color: #E6E6E6;"></span></a>
                </div>
            </div>
        </div>


        <!-- 备注2 -->
        <div class="remarkDiv" style="height: 60px;">
            <img title="zhangsan" src="../../image/user-thumbnail.png" style="width: 30px; height:30px;">
            <div style="position: relative; top: -40px; left: 40px;">
                <h5>呵呵！</h5>
                <font color="gray">市场活动</font> <font color="gray">-</font> <b>发传单</b> <small style="color: gray;">
                2017-01-22 10:20:10 由zhangsan</small>
                <div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: none;">
                    <a class="myHref" href="javascript:void(0);"><span class="glyphicon glyphicon-edit"
                                                                       style="font-size: 20px; color: #E6E6E6;"></span></a>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <a class="myHref" href="javascript:void(0);"><span class="glyphicon glyphicon-remove"
                                                                       style="font-size: 20px; color: #E6E6E6;"></span></a>
                </div>
            </div>
        </div>
    </div>

    <div id="remarkDiv" style="background-color: #E6E6E6; width: 870px; height: 90px;">
        <form role="form" style="position: relative;top: 10px; left: 10px;">
            <textarea id="remark" class="form-control" style="width: 850px; resize : none;" rows="2"
                      placeholder="添加备注..."></textarea>
            <p id="cancelAndSaveBtn" style="position: relative;left: 737px; top: 10px;">
                <button id="cancelBtn" type="button" class="btn btn-default">取消</button>
                <button id="btnRemarkAdd" type="button" class="btn btn-primary">保存</button>
            </p>
        </form>
    </div>
</div>
<div style="height: 200px;"></div>
</body>
</html>

<script>

    //前端获取url网址上面的参数值
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    function getAll(activityId) {
        //根据活动id进行查询
        $.ajax({
            url: "/Activity/getIdAndRemark.action",
            type: "get",
            dataType: "json",
            data: {
                id: activityId
            },
            beforeSend: function (XMLHttpRequest) {
                console.log("准备开始请求：");
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log("请求失败：" + textStatus);
            },
            success: function (data, textStatus, jqXHR) {
                console.log("请求成功：");
                $("#owner").text(data.owner);
                $("#name").text(data.name);
                $("#startDate").text(data.startDate);
                $("#endDate").text(data.endDate);
                $("#cost").text(data.cost);
                $("#description").text(data.description);
                $("#createBy").text(data.createBy);
                $("#createTime").text(data.createTime);
                $("#editBy").text(data.editBy);
                $("#editTime").text(data.editTime);

                //清空备注
                $("#remarkBody").empty();
                //循环备注
                $(data.activitiesRemarks).each(function (i, e) {
                    var temp = '    <div class="remarkDiv" style="height: 60px;">\n' +
                        '        <img title="zhangsan" src="../../image/user-thumbnail.png" style="width: 30px; height:30px;">\n' +
                        '        <div style="position: relative; top: -40px; left: 40px;">\n' +
                        '            <h5>' + e.noteContent + '</h5>\n' +
                        '            <font color="gray">市场活动</font> <font color="gray">-</font> <b>' + data.name + '</b> <small style="color: gray;">\n' +
                        '            ' + e.noteTime + ' 由' + e.notePerson + '</small>\n' +
                        '            <div style="position: relative; left: 500px; top: -30px; height: 30px; width: 100px; display: block;">\n' +
                        '                <a class="myHref" href="javascript:editRemark(\''+e.id+'\',\''+e.marketingActivitiesId+'\');"><span class="glyphicon glyphicon-edit"\n' +
                        '                                                                   style="font-size: 20px; color: #E6E6E6;"></span></a>\n' +
                        '                &nbsp;&nbsp;&nbsp;&nbsp;\n' +
                        '                <a class="myHref"  href="javascript:delRemark(\''+e.id+'\',\''+e.marketingActivitiesId+'\');"><span class="glyphicon glyphicon-remove"\n' +
                        '                                                                   style="font-size: 20px; color: #E6E6E6;"></span></a>\n' +
                        '            </div>\n' +
                        '        </div>\n' +
                        '    </div>';
                    $("#remarkBody").append(temp);
                });

            },
            complete: function (XMLHttpRequest, textStatus) {
                console.log("响应结果了：");
            }
        });
    }

    function delRemark(remakerId,activityId) {
        $.ajax({
            url: "/ActivitiesRemark/del.action",
            type: "post",
            dataType: "json",
            data: {
                id:remakerId
            },
            beforeSend: function (XMLHttpRequest) {
                console.log("准备开始请求：");
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log("请求失败：" + textStatus);
            },
            success: function (data, textStatus, jqXHR) {
                console.log("请求成功：");
                if (data['result'] == "success") {
                    getAll(activityId);
                } else {
                    window.alert(data['mess']);
                }
            },
            complete: function (XMLHttpRequest, textStatus) {
                console.log("响应结果了：");
            }
        });


    }

    function editRemark(remakerId,activityId) {
        $.ajax({
            url: "/ActivitiesRemark/edit.action",
            type: "post",
            dataType: "json",
            data: {
                id:remakerId,
                noteContent: $("#remark").val()
            },
            beforeSend: function (XMLHttpRequest) {
                console.log("准备开始请求：");
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                console.log("请求失败：" + textStatus);
            },
            success: function (data, textStatus, jqXHR) {
                console.log("请求成功：");
                if (data['result'] == "success") {
                    getAll(activityId);
                } else {
                    window.alert(data['mess']);
                }
            },
            complete: function (XMLHttpRequest, textStatus) {
                console.log("响应结果了：");
            }
        });


    }

    $(function () {
        //判定是否有id传递过来
        var urlParam = getUrlParam("id");
        if (urlParam === null) {
            console.log("id is null");
            alert("编辑的id没有提供，编辑错误");
            window.location = "index.html";
            return;
        }

        getAll(urlParam);

        $("#cancelBtn").click(function () {
            $("#remark").val("");
        });


        $("#btnRemarkAdd").click(function () {
            // alert(urlParam);
            $.ajax({
                url: "/ActivitiesRemark/add.action",
                type: "post",
                dataType: "json",
                data: {
                    noteContent: $("#remark").val(),
                    marketingActivitiesId: urlParam
                },
                beforeSend: function (XMLHttpRequest) {
                    console.log("准备开始请求：");
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log("请求失败：" + textStatus);
                },
                success: function (data, textStatus, jqXHR) {
                    console.log("请求成功.......................：");
                    if (data['result'] == "success") {
                        getAll(urlParam);
                        $("#remark").val("");
                    } else {
                        window.alert(data['mess']);
                    }
                },
                complete: function (XMLHttpRequest, textStatus) {
                    console.log("响应结果了：");
                }
            });
        });


    });


</script>